<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="课程ID">
        <el-input v-model="courseQuery.id" type="number"></el-input>
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input v-model="courseQuery.title"></el-input>
      </el-form-item>
      <el-form-item label="教师名称">
        <el-input v-model="courseQuery.teacherName"></el-input>
      </el-form-item>
      <el-form-item label="上架状态">
        <el-select
          v-model="courseQuery.status"
          clearable
          placeholder="请选择状态"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="未上架" value="Draft"></el-option>
          <el-option label="已上架" value="Normal"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="删除状态">
        <el-select
          v-model="courseQuery.isDeleted"
          clearable
          placeholder="请选择状态"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="正常" value="0"></el-option>
          <el-option label="已删除" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <el-button @click="onReset" icon="el-icon-refresh-right">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      element-loading-text="嗷嗷加载中..."
      :data="list"
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="200"> </el-table-column>
      <el-table-column prop="title" label="名称" width="180"> </el-table-column>
      <el-table-column prop="parentSubjectName" label="父科目"> </el-table-column>
      <el-table-column prop="subjectName" label="科目"> </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="teacherName" label="教师"> </el-table-column>
      <el-table-column prop="statusName" label="上架状态"> </el-table-column>
      <el-table-column prop="isDeleted" label="删除状态"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="`/course/course/${scope.row.id}`"><el-button size="mini">编辑课程信息</el-button></router-link>
          <router-link :to="`/course/chapter/${scope.row.id}`"><el-button size="mini">编辑章节信息</el-button></router-link>
          <el-button size="mini" type="danger" @click="deleteById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: center"
      @current-change="getList"
      :current-page="courseQuery.page"
      :page-size="courseQuery.limit"
      layout="total, prev, pager, next, jumper"
      :total="totalPage"
    >
    </el-pagination>
  </div>
</template>

<script>
import course from "@/api/edu/course";

export default {
  data() {
    return {
      list: [],
      totalPage: 0,
      courseQuery: {
        id: "",
        title: "",
        status: "",
        teacherName: "",
        isDeleted: "",
        page: 1,
        limit: 10,
      },
      listLoading: false,
    };
  },
  created() {
    this.getList()
  },
  methods: {
    onSubmit() {
      this.getList()
    },
    onReset() {
      this.courseQuery = {
        page: 1,
        status: "",
        isDeleted: "",
        limit: 10
      }
      this.getList()
    },
    getList() {
      this.listLoading = true
      course.getList(this.courseQuery).then(res => {
        this.list = res.data.result;
        this.totalPage = res.data.totalPage
        this.courseQuery.page = res.data.currentPage
        this.courseQuery.limit = res.data.limit
        this.listLoading = false
      })
    },
    deleteById(id) {
      this.$confirm("确认要删除吗？", "注意", {
        type: "warning",
      }).then(() => {
        course.deleteCourse(id).then(() => {
          this.$message.success("删除成功")
          this.getList()
        })
      }).catch(() => {})
    }
  }
};
</script>
<style>
</style>
